<div id="open-invoice">
    <div class="row">
        <div class="col-md-2 padding-r-0">
            <div class="border-radius">
                <div class="margin-xs-r treeview attendance-staff">
                    <ul class="list-group text-center border-radius">
                        <li class="list-group-item node-orgTree" v-for="(item,index) in openInvoiceInfo.tabs" :key="index" @click="switchTab(item.code)" :class="{'vc-node-selected2':openInvoiceInfo.activeTab == item.code}">
                            {{item.text}}
                        </li>
                        <li class="list-group-item node-orgTree" v-if="openInvoiceInfo.hasOpenInvoiced" @click="switchTab('invoice')" :class="{'vc-node-selected2':openInvoiceInfo.activeTab == 'invoice'}">发票</li>
                        <li class="list-group-item node-orgTree" v-else @click="switchTab('makeoutInvoice')" :class="{'vc-node-selected2':openInvoiceInfo.activeTab == 'makeoutInvoice'}">开票</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-10" :class="openInvoiceInfo.activeTab" v-if="openInvoiceInfo.activeTab=='sellerInfo'">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox">
                        <div class="ibox-title">
                            <h5>
                                <vc:i18n name="查询条件"></vc:i18n>
                            </h5>
                            <div class="ibox-tools" style="top:10px;"></div>
                        </div>
                        <div class="ibox-content">
                            <div class="row">
                                <div class="col-sm-2" style="width:25%;">
                                    <div class="form-group">
                                        <input type="text" :placeholder="vc.i18n('请选择销方名称','sellerName')" v-model="openInvoiceInfo.queryForm.sellerName" class="form-control">
                                    </div>
                                </div>
                                <div class="col-sm-2" style="width:25%;">
                                    <div class="form-group">
                                        <input type="text" :placeholder="vc.i18n('请选择销销售税号','sellerTaxNo')" v-model="openInvoiceInfo.queryForm.sellerTaxNo" class="form-control">
                                    </div>
                                </div>
                                <div class="col-sm-2" style="width:25%;">
                                    <div class="form-group">
                                        <input type="text" :placeholder="vc.i18n('请选择销方电话','sellerPhone')" v-model="openInvoiceInfo.queryForm.sellerPhone" class="form-control">
                                    </div>
                                </div>
                                <div class="col-sm-1" style="width:15%;">
                                    <button type="button" class="btn btn-primary btn-sm" style="min-width: 50px;height:34px;margin-top: 2px;width:100%;" v-on:click="_querySellerInfo()">
                                        <i class="glyphicon glyphicon-search"></i> <span>
                                            <vc:i18n name="查询"></vc:i18n>
                                        </span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox">
                        <div class="ibox-title">
                            <h5>
                                <vc:i18n name="销售方" namespace="sellerInfo"></vc:i18n>
                            </h5>
                            <div class="ibox-tools" style="top:10px;">
                                <button type="button" class="btn btn-primary btn-sm" @click="_addSellerInfo()">
                                    <vc:i18n name="添加"></vc:i18n>
                                </button>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <table  class="footable table table-stripped toggle-arrow-tiny" data-page-size="15">
                                <thead>
                                   <tr >
                                        <th class="text-center">
                                            <vc:i18n name='编号' namespace='sellerInfo'></vc:i18n>
                                        </th>
                                        <th class="text-center">
                                            <vc:i18n name='销售方名称' namespace='sellerInfo'></vc:i18n>
                                        </th>
                                        <th class="text-center">
                                            <vc:i18n name='销售税号' namespace='sellerInfo'></vc:i18n>
                                        </th>
                                        <th class="text-center">
                                            <vc:i18n name='销方电话' namespace='sellerInfo'></vc:i18n>
                                        </th>
                                        <th class="text-center">
                                            <vc:i18n name='销方地址' namespace='sellerInfo'></vc:i18n>
                                        </th>
                                        <th class="text-center">
                                            <vc:i18n name='开户行及账号' namespace='sellerInfo'></vc:i18n>
                                        </th>
                                        <th class="text-center">
                                            <vc:i18n name='备注' namespace='sellerInfo'></vc:i18n>
                                        </th>
                                        <th class="text-center">
                                            <vc:i18n name='操作'></vc:i18n>
                                        </th>
                                   </tr> 
                                </thead>
                                <tbody>
                                    <tr v-for="item in openInvoiceInfo.sellerData">
                                        <td class="text-center">{{ item.oiId }}</td>
                                        <td class="text-center">{{ item.sellerName }}</td>
                                        <td class="text-center"> {{ item.sellerTaxNo }} </td>
                                        <td class="text-center"> {{ item.sellerPhone }}</td>
                                        <td class="text-center"> {{ item.sellerAddress }}</td>
                                        <td class="text-center"> {{ item.sellerBranchBank }} {{ item.sellerBankAccount }} </td>
                                        <td class="text-center"> {{ item.remark }}</td>
                                        <td class="text-center">
                                            <div class="btn-group">
                                                <button class="btn-white btn btn-xs"  v-on:click="_editSellerInfo(item)">
                                                    <vc:i18n name='修改'></vc:i18n>
                                                </button>
                                            </div>
                                            <div class="btn-group">
                                                <button class="btn-white btn btn-xs"  v-on:click="_deleteSellerInfo(item.oiId)">
                                                    <vc:i18n name='删除'></vc:i18n>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                             <!-- 分页 -->
                             <vc:create path="frame/pagination"></vc:create>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-10" :class="openInvoiceInfo.activeTab" v-if="openInvoiceInfo.activeTab=='detailSetting'">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox">
                        <div class="ibox-title">
                            <h5>
                                <vc:i18n name="查询条件"></vc:i18n>
                            </h5>
                            <div class="ibox-tools" style="top:10px;"></div>
                        </div>
                        <div class="ibox-content">
                            <div class="row">
                                <div class="col-sm-2" style="width:25%;">
                                    <div class="form-group">
                                        <input type="text" :placeholder="vc.i18n('请选择销方ID','detailId')" v-model="openInvoiceInfo.detailSettingForm.id" class="form-control">
                                    </div>
                                </div>
                                <div class="col-sm-2" style="width:25%;">
                                    <div class="form-group">
                                        <input type="text" :placeholder="vc.i18n('请选择开票项名称','invoiceItemName')" v-model="openInvoiceInfo.detailSettingForm.invoiceItemName" class="form-control">
                                    </div>
                                </div>
                                <div class="col-sm-2" style="width:25%;">
                                    <div class="form-group">
                                        <input type="text" :placeholder="vc.i18n('请选择费用名称','expenseName')" v-model="openInvoiceInfo.detailSettingForm.expenseName" class="form-control">
                                    </div>
                                </div>
                                <div class="col-sm-1" style="width:15%;">
                                    <button type="button" class="btn btn-primary btn-sm" style="min-width: 50px;height:34px;margin-top: 2px;width:100%;" v-on:click="_queryDetailSettings()">
                                        <i class="glyphicon glyphicon-search"></i> <span>
                                            <vc:i18n name="查询"></vc:i18n>
                                        </span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox">
                        <div class="ibox-title">
                            <h5>
                                <vc:i18n name="明细设置" namespace="detailSetting"></vc:i18n>
                            </h5>
                            <div class="ibox-tools" style="top:10px;">
                                <button type="button" class="btn btn-primary btn-sm" @click="_addDetailSetting()">
                                    <vc:i18n name="添加"></vc:i18n>
                                </button>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <table  class="footable table table-stripped toggle-arrow-tiny" data-page-size="15">
                                <thead>
                                   <tr >
                                        <th class="text-center">
                                            <vc:i18n name='编号' namespace='detailSetting'></vc:i18n>
                                        </th>
                                        <th class="text-center">
                                            <vc:i18n name='开票项名称' namespace='detailSetting'></vc:i18n>
                                        </th>
                                        <th class="text-center">
                                            <vc:i18n name='费用名称' namespace='detailSetting'></vc:i18n>
                                        </th>
                                        <th class="text-center">
                                            <vc:i18n name='费用编号' namespace='detailSetting'></vc:i18n>
                                        </th>
                                        <th class="text-center">
                                            <vc:i18n name='费率' namespace='detailSetting'></vc:i18n>
                                        </th>
                                        <th class="text-center">
                                            <vc:i18n name='备注' namespace='detailSetting'></vc:i18n>
                                        </th>
                                        <th class="text-center">
                                            <vc:i18n name='操作'></vc:i18n>
                                        </th>
                                   </tr> 
                                </thead>
                                <tbody>
                                    <tr v-for="item in openInvoiceInfo.detailSettings">
                                        <td class="text-center">{{ item.id }}</td>
                                        <td class="text-center">{{ item.invoiceItemName }}</td>
                                        <td class="text-center"> {{ item.expenseName }} </td>
                                        <td class="text-center"> {{ item.expenseNum }}</td>
                                        <td class="text-center"> {{ item.expenseRate }} </td>
                                        <td class="text-center"> {{ item.remark }}</td>
                                        <td class="text-center">
                                            <div class="btn-group">
                                                <button class="btn-white btn btn-xs"  v-on:click="_editDetailSetting(item)">
                                                    <vc:i18n name='修改'></vc:i18n>
                                                </button>
                                            </div>
                                            <div class="btn-group">
                                                <button class="btn-white btn btn-xs"  v-on:click="_deleteDetailSetting(item.id)">
                                                    <vc:i18n name='删除'></vc:i18n>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                             <!-- 分页 -->
                             <vc:create path="frame/pagination"></vc:create>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-10 makeoutInvoice" v-else-if="openInvoiceInfo.activeTab=='makeoutInvoice'">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox">
                        <div class="ibox-title">
                            <h5>
                                <vc:i18n name="在线开票" namespace="onlineMakeoutInvoice"></vc:i18n>
                            </h5>
                        </div>
                        <div class="ibox-content">
                            <div class="row"> 
                                <div class="half-row"> 
                                    <label class="text-right">购方名称</label>
                                    <input type="text" name="purchaserName" class="form-control" v-model="openInvoiceInfo.makeoutInvoiceForm.purchaserName" :placeholder="vc.i18n('请输入购方名称','purchaserName')" />
                                </div>
                                <div class="half-row"> 
                                    <label class="text-right">购方税号</label>
                                    <input type="text" name="purchaserName" name="purchaserTaxNo" class="form-control" v-model="openInvoiceInfo.makeoutInvoiceForm.purchaserTaxNo" :placeholder="vc.i18n('请输入购方税号','purchaserTaxNo')" />
                                </div>
                            </div>
                            <div class="row"> 
                                <div class="half-row"> 
                                    <label class="text-right">购方电话</label>
                                    <input type="text" name="purchaserPhone" name="purchaserName" class="form-control" v-model="openInvoiceInfo.makeoutInvoiceForm.purchaserPhone" :placeholder="vc.i18n('请输入购方电话','purchaserPhone')" />
                                </div>
                                <div class="half-row"> 
                                    <label class="text-right">购方地址</label>
                                    <input type="text" name="purchaserAddress" name="purchaserName" class="form-control" v-model="openInvoiceInfo.makeoutInvoiceForm.purchaserAddress" :placeholder="vc.i18n('请输入购方名称','purchaserAddress')" />
                                </div>
                            </div>
                            <div class="row">
                                <div class="half-row"> 
                                    <label class="text-right">购方开户行及账号</label>
                                    <input type="text" name="purchaserBankAccount" name="purchaserName" class="form-control" v-model="openInvoiceInfo.makeoutInvoiceForm.purchaserBranchBankAccount" :placeholder="vc.i18n('请输入购方开户行及账号','purchaserBranchBankAccount')" />
                                </div>
                            </div>
                            <div class="row"> 
                                <div class="half-row"> 
                                    <label class="text-right">销方名称</label>
                                    <select class="custom-select form-control" name="purchaserName" v-model="openInvoiceInfo.makeoutInvoiceForm.sellerName" @change="sellerNameChange">
                                        <option selected value="">
                                            请选择销售方名称
                                        </option>
                                        <option v-for="(item,index) in openInvoiceInfo.sellerData" :key="index" :value="index">{{ item.sellerName }}</option>
                                    </select>
                                </div>
                                <div class="half-row"> 
                                    <label class="text-right">销售税号</label>
                                    <input type="text" name="sellerTaxNo" class="form-control" v-model="openInvoiceInfo.makeoutInvoiceForm.sellerTaxNo" :placeholder="vc.i18n('必填，请填写销售税号','sellerTaxNo')" />
                                </div>
                            </div>
                            <div class="row"> 
                                <div class="half-row"> 
                                    <label class="text-right">销方电话</label>
                                    <input type="text" name="sellerPhone" class="form-control" v-model="openInvoiceInfo.makeoutInvoiceForm.sellerPhone" :placeholder="vc.i18n('必填，请填写销方电话','sellerPhone')" />
                                </div>
                                <div class="half-row"> 
                                    <label class="text-right">销方地址</label>
                                    <input type="text" name="sellerAddress" class="form-control" v-model="openInvoiceInfo.makeoutInvoiceForm.sellerAddress" :placeholder="vc.i18n('必填，请填写销方地址','sellerAddress')" />
                                </div>
                            </div>
                            <div class="row">
                                <div class="half-row"> 
                                    <label class="text-right">开户行及账号</label>
                                    <input type="text" name="sellerBranchBankAccount" class="form-control" v-model="openInvoiceInfo.makeoutInvoiceForm.sellerBranchBankAccount" :placeholder="vc.i18n('请输入购方开户行及账号','sellerBranchBankAccount')" />
                                </div>
                            </div>
                            <div class="row"> 
                                <div class="half-row"> 
                                    <label class="text-right">复核人</label>
                                    <input type="text" name="reviewer" class="form-control" v-model="openInvoiceInfo.makeoutInvoiceForm.reviewer" :placeholder="vc.i18n('请填写复核人','reviewer')" />
                                </div>
                                <div class="half-row"> 
                                    <label class="text-right">收款人</label>
                                    <input type="text" name="payee" class="form-control" v-model="openInvoiceInfo.makeoutInvoiceForm.payee" :placeholder="vc.i18n('请填写收款人','payee')" />
                                </div>
                            </div>
                            <div class="row"> 
                                <div class="half-row"> 
                                    <label class="text-right">开票员</label>
                                    <input type="text" name="reviewer" class="form-control" v-model="openInvoiceInfo.makeoutInvoiceForm.invoiceClerk" :placeholder="vc.i18n('请填写开票员','invoiceClerk')" />
                                </div>
                                <div class="half-row"> 
                                    <label class="text-right">发票种类</label>
                                    <select class="custom-select form-control" name="invoiceType" v-model="openInvoiceInfo.makeoutInvoiceForm.invoiceType">
                                        <option selected value="1001">普通发票</option>
                                        <option value="1002" >专用发票</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="half-row"> 
                                    <label class="text-right">推送方式</label>
                                    <select class="custom-select" class="form-control" v-model="openInvoiceInfo.makeoutInvoiceForm.msgPushType">
                                        <option selected value="">
                                            必填，请选择推送方式
                                        </option>
                                        <option value="none">不推送</option>
                                        <option value="shortMsg">短信</option>
                                        <option value="email">邮件</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="half-row"> 
                                    <label class="text-right">备注</label>
                                    <textarea  v-model="openInvoiceInfo.makeoutInvoiceForm.remark" style="width:60%;margin-top:5px" :placeholder="vc.i18n('选填，请填写备注','remark')"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="button-row">
                            <button type="button" class="btn btn-primary btn-sm" style="min-width: 80px;margin-top:10px;float:right;" @click="_submitOpenInvoice()">
                                <vc:i18n name="提交开票"></vc:i18n>
                            </button>
                        </div>
                    </div>
                </div>
            </div>    
        </div>
    </div>
    <vc:create path="fee/invoiceSellerInfo"></vc:create>
    <vc:create path="fee/deleteInvoiceSeller"></vc:create>
    <vc:create path="fee/invoiceDetailSetting"></vc:create>
</div>